<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="actionStatus == 'edit' ? '修改采购单' : '新建采购单'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <!-- <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="20" :sm="24" :xs="24">
          <a-form-item label="所属位置" v-bind="validateInfos.come_type_code">
            <a-select
              optionFilterProp="label"
              :options="cangku"
              allow-clear
              v-model:value="form.come_type_code"
              placeholder="请选择所属位置"
              @change="cangkuChange"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="分配位置">
            <a-select
              optionFilterProp="label"
              :options="store"
              allow-clear
              v-model:value="form.to_type"
              placeholder="请选择分配位置"
              @change="storeChange"
              autocomplete="off"
            />
          </a-form-item>
          <template v-if="showGuizu">
            <a-form-item label="门店">
              <a-select
                optionFilterProp="label"
                :options="mendian"
                allow-clear
                v-model:value="store_code"
                placeholder="请选择门店"
                @change="mendianChange2"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="柜组">
              <a-select
                optionFilterProp="label"
                :options="guizu"
                allow-clear
                v-model:value="guizu_name"
                placeholder="请选择柜组"
                @change="guizuChange"
                autocomplete="off"
              />
            </a-form-item>
          </template>
          <a-form-item label="门店" v-if="showMendian">
            <a-select
              optionFilterProp="label"
              :options="mendian"
              allow-clear
              v-model:value="form.to_type_code"
              placeholder="请选择门店"
              @change="mendianChange"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="供应商" v-bind="validateInfos.supplier_code">
            <a-select
              optionFilterProp="label"
              :options="supplier"
              allow-clear
              v-model:value="form.supplier_code"
              placeholder="请选择供应商"
              @change="supplierChange"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="采购员">
            <a-select
              optionFilterProp="label"
              :options="caigouyuan"
              allow-clear
              v-model:value="purchase_user"
              placeholder="请选择采购员"
              @change="caigouyuanChange"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="制单人">
            <a-select
              optionFilterProp="label"
              :options="caigouyuan"
              allow-clear
              v-model:value="make_user"
              placeholder="请选择制单人"
              @change="makeUserChange"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="业务日期">
            <a-date-picker
              class="ele-fluid"
              valueFormat="YYYY/MM/DD"
              placeholder="请选择业务日期"
              v-model:value="form.business_time"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form> -->
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
      :model="form2"
      :rules="rules2"
    >
      <a-row :gutter="24">
        <a-col
          :md="20"
          :sm="24"
          :xs="24"
          v-for="(item, index) in arrParmas"
          :key="index"
        >
          <selectinp
            ref="selectinpRef"
            v-model:value="form2[item.value]"
            :dataValue="form2[item.value]"
            :itemData="item"
            :estraparmas="estraParmas"
            :actionStatus="props.actionStatus"
            :validateInfos="validateInfos"
            @getData="getData"
          />
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import zbTable from '@/components/zbTable/jewelryCaoGouIndex.vue';
  import selectinp from '@/components/zbInput/selectInput.vue';
  import { get_column_templete_list } from '@/api/material/receipts_templete';
  import {
    get_warehouse_list,
    get_store_list,
    get_store_group_list,
    get_user_list,
    get_supplier_list,
    receipts_purchase_detail,
    receipts_templete
  } from '@/api/jewelry/receipts_purchase';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑edit/新建add
    actionStatus: String,
    // 编辑数据id
    editData: Object,
    templateId: [String, Number]
  });

  const selectinpRef = ref(null);

  const emit = defineEmits(['done', 'update:visible']);

  // 提交状态
  const loading = ref(false);
  const arrParmas = ref([]);
  const form2 = reactive({});
  const rules2 = reactive({});
  const estraParmas = ref({});
  const estraParmas2 = ref({});

  onMounted(async () => {
    arrParmas.value = [];
    await receipts_templete({ page: 1, limit: 9999 }).then((res) => {
      res.data.row_list.forEach((item, index) => {
        arrParmas.value.push({
          type: item.column_type,
          label: item.name,
          value: item.column,
          params: item.params,
          require: item.require
        });
        form2[item.column] = '';
        rules2[item.column] = [
          {
            required: item.require == 1 ? true : false,
            message:
              item.column_type === 'text'
                ? `请输入${item.name}`
                : `请选择${item.name}`,
            trigger: 'change'
          }
        ];
      });
    });
    await get_warehouse_list({ page: 1, limit: 9999 }).then((res) => {
      let options = [];
      res.list.map((item) => {
        options.push({
          value: String(item.code),
          label: item.name
        });
      });
      arrParmas.value.forEach((item) => {
        if (item.value == 'come_type_code') {
          item.options = options;
        }
      });
    });
    await get_store_list({ page: 1, limit: 9999 }).then((res) => {
      let options = [];
      res.list.map((item) => {
        options.push({
          value: String(item.code),
          label: item.name
        });
      });
      arrParmas.value.forEach((item) => {
        if (item.value == 'to_type_code') {
          item.options = options;
        }
      });
    });
    if (props.editData.code) {
      form2.code = props.editData.code;
      await receipts_purchase_detail({ code: props.editData.code }).then(
        (res) => {
          Object.keys(form2).forEach((key) => {
            //form2[key] = res.receipts_detail && res.receipts_detail[key] ? res.receipts_detail[key] : '';
            if (res.receipts_detail[key]) {
              if (typeof res.receipts_detail[key] == 'number') {
                form2[key] = res.receipts_detail[key].toString();
              } else {
                form2[key] = res.receipts_detail[key];
              }
            } else {
              form2[key] = '';
            }
          });
          estraParmas.value.price = res.receipts_detail.price;
          estraParmas.value.weight = res.receipts_detail.weight;
          estraParmas.value.gold_category_code =
            res.receipts_detail.gold_category_code;
        }
      );
    }
  });

  const getData = (data) => {
    console.log('####', data);
    estraParmas2.value = data;
  };
  const { validate, validateInfos } = useForm(form2, rules2);
  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        if (props.templateId) {
          form2.goods_category_code = props.templateId;
        }
        form2.price = estraParmas2.value.price;
        form2.weight = estraParmas2.value.weight;
        form2.gold_category_code = estraParmas2.value.gold_category_code;
        console.log('form2===', estraParmas2.value);
        emit('done', form2);
      })
      .catch((e) => {
        console.log(e);
      });
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
